<template>
	<view class="box">
		<view class="title1">
			<view class="title1-L">
				首期实付租金
			</view>
			<view class="title1-R">
			
				<text style="font-size: 24rpx;">￥</text> <text v-if="!gold">{{orderPre.stage[0].money}}</text>	<text v-if="gold">0</text>
			
			</view>
		</view>

		<view class="title2">
			<view class="title2-L">
				首月租金
			</view>
			<view class="title2-R" style="color: red;">
				￥ <text v-if="!gold">{{orderPre.stage[0].money}}</text>	<text v-if="gold">0</text>
			</view>
		</view>

		<view class="title2">
			<view class="title2-L">
				邮费
			</view>
			<view class="title2-R">
				包邮
			</view>
		</view>
		
		
		<view class="useCounp" v-if="false">
			<view class="" style="display: flex;align-items: center;">
				<view class="sun_icon">
					惠
				</view>
				<view class="" style="font-size: 24rpx;color: #666;margin-left: 20rpx;">
					可享优惠
				</view>
			</view>
			<view class=""  style="display: flex;align-items: center;color: #FB5049;">
				<view class="" style="font-size:20rpx;border: 1rpx solid #FB5049;padding: 4rpx;border-radius: 6rpx;margin-right: 20rpx;">
					已选最优折扣
				</view>
				<view class="" style="font-size: 28rpx;margin-right: 20rpx;">
					-￥150
				</view>
				<view class="">
					>
				</view>
			</view>
		</view>
		
		
		<view class="title2">
			<view class="title2-L">
				总租金
			</view>
			<view class="title2-R">
				￥{{orderPre.stage_allMoney}}
			</view>
		</view>



		<view style="margin-top: 20rpx;">
			<view class="" style="display: flex;justify-content: space-between;align-items: flex-end;">
				<view class="title2-L" style="font-size: 32rpx;font-weight: 700;">
					分期方式
				</view>
				<view class="title2-R" style="font-size: 24rpx;color: #999;">
					30天租期间隔
					<!-- 	￥{{orderPre.stage[0].money}}*{{orderPre.stage.length -1}}期 -->
				</view>
			</view>
			<!-- <view class="timeMoney">
				
			</view> -->
			<view class="byStages">
				<view class="byStages-item" v-for='(item,index) in orderPre.stage' :key="index">
					<view class="byStages-item-left">
						<text>{{index + 1}}/{{orderPre.stage.length}}期</text>
						<image :src="$BASE_URL + circleicon[2]" mode="aspectFill" style="height: 24rpx;width: 24rpx;">
						</image>
						<text>{{item.money}}元</text>
					</view>
					<view class="byStages-item-right">
						<text>{{item.day}}</text>
					</view>
				</view>



			</view>
		</view>



		<view class="title2">
			<view class="title2-L">
				到期买断价
			</view>
			<view class="title2-R">
				￥{{orderPre.buyout}}
			</view>
		</view>


	</view>

</template>
<script>
	export default {
		props: {
			orderPre: {
				type: Object,
				default: () => {
					return {}
				}
			},
			circleicon: {
				type: Array,
				default: () => {
					return []
				}
			},
			confirmPage: {
				type: Array,
				default: () => {
					return []
				}
			},
			goodsList: {
				type: Array,
				default: () => {
					return []
				}
			}

		},

		data() {
			return {

			}
		},
		computed: {
			gold() {

				let index = this.orderPre.goods_ids.split(',').includes(this.goodsList[0].goods_id.toString())
				return index
			}

		},
		mounted() {
			// console.log(this.orderPre.goods_ids.split(','));
			// console.log(this.goodsList[0].goods_id.toString());
			// console.log(this.orderPre.goods_ids.split(',').includes(this.goodsList[0].goods_id.toString()));
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 710rpx;
		padding: 25rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;

		.timeMoney {
			margin-top: 20rpx;
			width: 100%;
			height: 562px;
			border-radius: 16rpx;
			opacity: 1;

			background: #FAFAFA;
		}


		.byStages {
			margin-top: 20rpx;
			width: 100%;
			// height: 300rpx;
			background-color: #FAFAFA;
			border-radius: 20rpx;
			padding: 20rpx 0;

			.byStages-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				// margin-bottom: 40rpx;
			}

			.byStages-item-left {
				color: #333;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 60%;
			}

			.byStages-item-right {
				width: 30%;
			}
		}


		.title1,
		.title2 {
			display: flex;
			justify-content: space-between;

		}

		.title2 {
			margin-top: 32rpx;
			font-size: 28rpx;

			.title2-L {
				color: #666;
			}

			.title2-R {
				color: #333;
			}
		}
		.useCounp {
			margin-top: 18rpx;
			width: 100%;
			height: 78rpx;
			border-radius: 12rpx;
			opacity: 1;
			padding: 20rpx 18rpx;
			box-sizing: border-box;
			background: #FEEEEE;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.sun_icon {
				font-size: 24rpx;
				border-radius: 6rpx;
				width: 36rpx;
				height: 36rpx;
				color: #fff;
				text-align: center;
				line-height: 36rpx;
				background: linear-gradient(133deg, #FF8679 -5%, #FB4A43 106%);
			}
		}


		.title1 {
			padding: 20rpx 0;
			border-bottom: 2rpx solid gainsboro;
			font-weight: 600;

			.title1-R {
				font-weight: 600;
			}
		}
	}
</style>
